<template>
  <button @click="fadeInOut">显示/隐藏</button>
  <transition enter-active-class="animated bounceIn"
    leave-active-class="animated bounceOut"
    :duration={enter:1000,leave:800}>
    <h3 v-if="isShow">{{ msg }}</h3>
  </transition>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            isShow: true,
            msg: 'Hello Vue World!'
        })
        const fadeInOut = () => {
            state.isShow = !state.isShow
        }
        return {
            ...toRefs(state),
            fadeInOut
        }
    }
}
</script>

<style scoped>
@import url(../../../assets/animate.min.css);
</style>